<template>
  <div class="system" ref="system">
    <div class="s-text">
      <p>2022年</p>
      <p>
        你一共参与了
        <span class="keyword"><count-up :end-val="props.stats?.system.approval" /></span>
        次流程
      </p>
      <p>
        移动打卡<span class="keyword"><count-up :end-val="props.stats?.system.attendance" /></span>次
      </p>
      <p>
        线上参会<span class="keyword"><count-up :end-val="props.stats?.system.meetingQuantity" /></span>次，累计时长<span
          class="keyword">
          <count-up :end-val="props.stats?.system.meetingHours" /> </span>小时
      </p>
      <p>
        收发邮件<span class="keyword">
          <count-up :end-val="props.stats?.system.email" /></span>封
      </p>
      <p>一起走过的点点滴滴,就这样继续温暖</p>
      <p class="scecond-para">并携手以后的日日夜夜</p>

      <div class="s-approval">
        <div>
          你最
          <span class="keyword">常用</span>的流程
        </div>
        <p v-if="props.stats?.mostUsedApproval[0]">
          <span class="first">1</span>
          <span>{{ props.stats?.mostUsedApproval[0] }}</span>
        </p>
        <p v-if="props.stats?.mostUsedApproval[1]">
          <span class="second">2</span>
          <span>{{ props.stats?.mostUsedApproval[1] }}</span>
        </p>
        <p v-if="props.stats?.mostUsedApproval[2]">
          <span class="third">3</span>
          <span>{{ props.stats?.mostUsedApproval[2] }}</span>
        </p>
      </div>
    </div>
    <!-- <img class="s-bg" src="@/assets/img/system/bg-planet.png" /> -->
    <div ref="systemPlanet" class="s-bg"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { slideUp, slideDown } from "@/utils/slide";
import lottie from "lottie-web";
import systemPlanetJson from "@/assets/img/system/data.json";

const systemPlanet = ref(null);

const props = defineProps<{
  stats: any;
}>();

const emit = defineEmits(["slideUp", "slideDown"]);

onMounted(() => {
  slideUp(system.value, () => {
    emit("slideUp");
  });

  slideDown(system.value, () => {
    emit("slideDown");
  });

  // lottie动画初始
  lottie.loadAnimation({
    container: systemPlanet.value,
    renderer: "svg",
    loop: true,
    autoplay: true,
    animationData: systemPlanetJson, // the path to the animation json
  });
});

const system = ref(null);
</script>

<script lang="ts">
import CountUp from "@/components/Countup/index.vue";

export default {
  name: "SystemPage",
  components: {
    CountUp,
  },
};
</script>

<style lang="scss" scoped>
:deep(.countup-wrap) {
  display: inline;
}

.system {
  @include full-screen-relative;
}

.s-text {
  @include animation-fade-in(5s);
  position: absolute;
  left: $text-left;
  top: $text-top;
  z-index: 999;
  width: 580px;
  font-size: $font-size-normal;
  font-family: ChangAnunitype;
  font-weight: 400;
  color: #ffffff;

  p {
    margin-top: 30px;

    &:first-child {
      margin-top: 0;
    }
  }

  .scecond-para {
    margin-top: 10px;
  }
}

.s-bg {
  @include animation-fade-in(2s);
  position: fixed;
  bottom: 0;
  height: 585px;
  width: 750px;
}

.s-approval {
  margin-top: 100px;

  p {
    display: flex;
    align-items: center;
  }

  span {
    &:last-child {
      width: 800px;
      @include ellipsis;
    }
  }

  .first {
    margin-right: 10px;
    font-size: $font-size-key;
    color: #f7e94e;
  }

  .second {
    margin-right: 10px;
    font-size: $font-size-key;

    color: #e6e6e5;
  }

  .third {
    margin-right: 10px;
    font-size: $font-size-key;
    color: #e8a76a;
  }
}
</style>
